import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    children: [
      {
        path: "/A",
        name: "A",
        component: () =>
          import(/* webpackChunkName: "keepA" */ "../views/keepalive/keepA.vue"),
      },
      {
        path: "/B",
        name: "B",
        component: () =>
          import(/* webpackChunkName: "keepA" */ "../views/keepalive/B.vue"),
      },
      {
        path: "/C",
        name: "C",
        component: () =>
          import(/* webpackChunkName: "keepA" */ "../views/keepalive/C.vue"),
      },
      {
        path: "/D",
        name: "D",
        component: () =>
          import(/* webpackChunkName: "keepA" */ "../views/keepalive/D.vue"),
      },
    ]
  },
  {
    path: "/login",
    name: "login",
    // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/login/Login.vue"),
  },
  {
    path: "/tabs",
    name: "tabs",
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/pageHome/homePage.vue"),
    children: [
      {
        path: "home",
        name: "hom",
        children: [],
        // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
        component: () =>
          import(/* webpackChunkName: "login" */ "../views/pageHome/home.vue"),
      },
      {
        path: "my",
        name: "my",
        // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
        component: () =>
          import(/* webpackChunkName: "login" */ "../views/pageHome/my.vue"),
      },
    ],
  },
  {
    path: "/prop",
    name: "prop",
    // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/componentProps/prevent.vue"),
  },
  {
    path: "/next",
    name: "next",
    // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/newpage/nextTick.vue"),
  },
  {
    path: "/vuex",
    name: "vuex",
    // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/vuex/vuexPage.vue"),
  },
  {
    path: "/set",
    name: "set",
    // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/newpage/setPage.vue"),
  },
  {
    path: "/slot",
    name: "slot",
    // webpackChunkName   魔法注释--它的值是字符串 按照模块划分，相同的模块名会一起请求加载，减少整体项目加载时间
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/newpage/slot.vue"),
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;
